.app-container {
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;

  .body {
    height: 0;
    flex-grow: 1;
    background-image: url('/assets/img/backgroud.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;

    .title {
      height: 22px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      margin-top: 15px;

      img {
        position: absolute;
        left: 15px;
      }
    }

    .chat-content {
      display: flex;
      flex-direction: column;
      padding: 0 12px;
      // overflow-y: auto;
      height: 0;
      flex-grow: 1;

      .chat-tips-text {
        display: flex;
        overflow: hidden;
        height: 113px;

        .hi {
          width: 0;
          flex-grow: 1;
          display: flex;
          flex-direction: column;

          p:first-child {
            height: 26px;
            font-family: ZihunQuYuanHei;
            font-size: 22px;
            font-weight: 400;
            letter-spacing: 0px;
            margin-top: 24px;
          }

          p:last-child {
            margin-top: 13px;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0px;
            margin-top: 13px;
            line-height: 22px;
          }
        }
      }

      .c-navigation {
        margin-top: -2px;
        height: 4rem;
        background: #ffffff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        box-shadow: 0 3px 3px 0px #00000030;

        .nav-item {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0px;
          text-align: center;
        }
      }

      .message-body {
        margin-bottom: 69px;
        overflow-y: auto;
        height: 0;
        flex-grow: 1;
        margin-top: 0.5rem;

        // 猜你想问
        .guess-issue {
          display: flex;
          margin-top: 2rem;

          .issue-content {
            margin-left: 19px;
            width: 70vw;
            background-color: #ffffff;
            min-height: 200px;
            position: relative;
            border-radius: 8px;

            .issue-item {
              padding: 0px 12px;
              height: 45px;
              display: flex;
              align-items: center;
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 14px;
              line-height: 22px;
              color: #000000;
            }

            .issue-item:not(.issue-:last-child) {
              border-bottom: 0.5px #e9e9e9 solid;
            }

            .issue-title {
              border-bottom: 0.5px #e9e9e9 solid;
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 14px;
              line-height: 22px;
              color: #1c81fd;

              .title-refrensh {
                position: absolute;
                right: 12px;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                  height: 100%;
                  margin-left: 2px;
                  padding-top: 1.5px;
                  font-family: PingFang SC;
                  font-size: 12px;
                  font-weight: 500;
                  line-height: 22px;
                  color: #9a9a9c;
                }
              }
            }
          }

          .issue-content::before {
            content: '';
            position: absolute;
            top: 10px;
            left: -8px;
            /* 根据需要调整位置 */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 9px 9px 9px 0px;
            /* 调整三角形的尺寸 */
            border-color: transparent #fff transparent transparent;
            /* 调整颜色和透明度 */
          }
        }

        .message-list {
          display: flex;
          flex-direction: column;
          margin-top: 2rem;

          .message-item {
            display: flex;

            .avatar {
              height: 40px;
              width: 40px;
              border-radius: 50%;
              overflow: hidden;
            }

            .message-content {
              padding: 0px 12px;
              display: flex;
              align-items: center;
              line-height: 24px;
              font-size: 14px;
              font-weight: 400;
            }
          }

          .message-item+.message-item {
            margin-top: 1rem;
          }

          .customer-message {
            .customer-content {
              margin-left: 19px;
              max-width: 70vw;
              background-color: #ffffff;
              position: relative;
              border-radius: 8px;
            }

            .customer-content::before {
              content: '';
              position: absolute;
              top: 10px;
              left: -8.5px;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 9px 9px 9px 0px;
              border-color: transparent #fff transparent transparent;
            }
          }

          .user-message {
            display: flex;
            justify-content: flex-end;

            .user-content {
              margin-right: 19px;
              max-width: 70vw;
              background-color: #90a2f5;
              position: relative;
              border-radius: 8px;
              color: #ffffff;
            }

            .user-content::after {
              content: '';
              position: absolute;
              border-top: 9px transparent solid;
              border-bottom: 9px transparent solid;
              border-left: 9px #90a2f5 solid;
              top: 10px;
              right: -8px;
            }
          }
        }
      }
    }
  }

  .bottom-send {
    position: fixed;
    width: 100vw;
    bottom: 0px;
    z-index: 999;
    padding: 0 12px;
    background-color: #ffffff;
    margin-top: 1rem;
    height: 64px;
    display: flex;
    box-shadow: 0 -3px 3px #00000010;
    align-items: center;
    justify-content: center;
    .send-msg-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;

      .img-upload {
        width: 31px;
        height: 31px;
        margin-left: 8px;
      }

      .text-input {
        height: 40px;
        width: 0;
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;

        input {
          height: 100%;
          width: 100%;
          border-radius: 88px;
          border: 1px #e0e0e0 solid;
          padding-left: 10px;
          padding-right: 39px;
        }

        img {
          position: absolute;
          right: 5px;
        }
      }
    }

    .dispatch-btn{
      width: 200px;
      height: 50px;
      margin: 10px 0;
      background-color: #1c81fd;
      border-radius: 8px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
        :last-child{
          height: 20px;
          display: flex;
          align-items: end;
          line-height: 14px;
          font-size: 14px;
        }
    }
  }
}